<html>

<head>
    <style>
        body {
            background-color: #fbfbfb ;
            color: #3e3838 ;
            font-family: var(--vscode-font-family);
            font-weight: var(--vscode-font-weight);
            font-size: 14px;
            margin: 0;
            padding: 0 20px;
        }


        #content {
            width: 100%;
        }

        #pagination-wrapper {
            position: fixed;
            padding: 10px;
            top: 5%;
            right: 60px;
        }

        #top-btn {
            position: fixed;
            right: 100px;
            top: 50%;
            border-radius: 5px;
            width: 32px;
            height: 32px;
            background-color: #3e3838;
        }
    </style>
    <link href="word/pagination.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/vscode.js"></script>
    <script src="word/pagination.min.js"></script>
</head>

<body>
    <div id="pagination-wrapper">
        <div id="pagination">
        </div>
    </div>
    <div id="content">
        {{content}}
    </div>
    <!-- <div id="top-btn" title="Scroll to top"></div> -->
</body>

<script>

    if ($autoTheme) {
        window.addThemeCss()
    }

    function createSerial(count) {
        var result = [];
        for (var i = 1; i <= count; i++) {
            result.push(i);
        }
        return result;
    }

    function initPaginition() {
        const total = document.body.scrollHeight / window.innerHeight
        $('#pagination').pagination({
            dataSource: createSerial(total),
            pageSize: 1,
            pageRange: null,
            showPageNumbers: true,
            showNavigator: true,
            showGoInput: true,
            showGoButton: true,
            callback: (data, pagination) => {
                window.scrollTo(0, window.innerHeight * data[0]);
            }
        })
    }


    window.onmousewheel = document.onmousewheel = e => {
        if (!e.ctrlKey) {
            return;
        }
        const ele = document.getElementById('content');
        const zoom = ele.style.zoom ? parseInt(ele.style.zoom.replace("%", "")) : 100
        if (e.deltaY > 0) {
            ele.style.zoom = `${zoom - 5}%`;
        } else {
            ele.style.zoom = `${zoom + 5}%`;
        }
        initPaginition()
    };

    onload = () => {

        initPaginition()

        document.getElementById('top-btn').onclick = e => {
            window.scrollTo(0, 0)
        }


    }

</script>

</html>